<template>
  <div class="index">
    <!-- 首页入口 -->
    <HomeEntry></HomeEntry>
    <!-- 新鲜好物 -->
    <HomeOne :newData="newData" :flag="'new'" ref="new">
      <template #title>
        <!-- 标题 -->
        <h3>新鲜好物 <span>新鲜出炉&emsp;品质靠谱</span></h3>
        <span class="all">查看全部></span>
      </template>
    </HomeOne>
    <!-- 人气推荐 -->
    <HomeOne :newData="hotData" :flag="'hot'" ref="hot">
      <template #title>
        <!-- 标题 -->
        <h3>人气推荐 <span>人气爆款&emsp;不容错过</span></h3>
      </template>
    </HomeOne>
    <!-- 热门品牌 -->
    <HomeTwo :hotBrand="hotBrand" ref="hotBrand"></HomeTwo>
    <!-- 产品区块 -->
    <HomeThree :goods="goods" ref="goods"></HomeThree>
    <!-- 最新专题 -->
    <HomeFour :specialData="specialData" ref="special"></HomeFour>
  </div>
</template>

<script>
// 引入组件
import HomeEntry from "./HomeEntry.vue";
import HomeOne from "@/components/Index/HomeOne.vue";
import HomeTwo from "@/components/Index/HomeTwo.vue";
import HomeThree from "@/components/Index/HomeThree.vue";
import HomeFour from "@/components/Index/HomeFour.vue";
// 引入数据懒加载函数
import { lazyData } from "@/utils/Throttle";
// 引入api
import {
  getNew,
  getHot,
  getBrand,
  getGoods,
  getSpecial,
} from "@/utils/Api/HomeApi";
export default {
  components: {
    HomeEntry,
    HomeOne,
    HomeTwo,
    HomeThree,
    HomeFour,
  },
  data() {
    return {
      // 新鲜好物
      newData: [],
      // 人气推荐
      hotData: [],
      // 热门品牌
      hotBrand: [],
      // 产品区块
      goods: [],
      // 最新专题
      specialData: [],
    };
  },
  // 初始化调用
  mounted() {
    // 调用数据懒加载函数
    lazyData(this.$refs.new.$el, this.getNewData);
    lazyData(this.$refs.hot.$el, this.getHotData);
    lazyData(this.$refs.hotBrand.$el, this.getBrandData);
    lazyData(this.$refs.goods.$el, this.getGoodsData);
    lazyData(this.$refs.special.$el, this.getSpecialData);
  },
  methods: {
    // 获取新鲜好物数据
    async getNewData() {
      let { data } = await getNew();
      this.newData = data.result;
    },
    // 获取新鲜好物数据
    async getHotData() {
      let { data } = await getHot();
      this.hotData = data.result;
    },
    // 获取热门品牌数据
    async getBrandData() {
      let { data } = await getBrand(10);
      this.hotBrand = data.result;
    },
    // 获取产品区块数据
    async getGoodsData() {
      let { data } = await getGoods();
      this.goods = data.result;
    },
    // 获取最新专题数据
    async getSpecialData() {
      let { data } = await getSpecial();
      this.specialData = data.result;
    },
  },
};
</script>

<style scoped></style>
